<template>
  <div class="shoukuanpeizhi">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="tabs_container">
          <div
            @click="choosetab('one')"
            class="tabs_line_son"
            :class="activeName === 'one' ? 't_tab_title_lei' : ''"
          >
            订单查询配置
            <div :class="{ t_under_line_lei:activeName === 'one'}"></div>
          </div>
          <div
            @click="choosetab('two')"
            class="tabs_line_son"
            :class="activeName === 'two' ? 't_tab_title_lei' : ''"
          >
            收款配置
            <div :class="{ t_under_line_lei:activeName === 'two'}"></div>
          </div>
        </div>
        <div class="zhiboxitong_right">
          <div class="tabs_containers" v-show="activeName === 'two'">
            <div
              @click="choosetabs('first')"
              class="tabs_line_son"
              :class="activeNames === 'first' ? 't_tab_title_leis' : ''"
            >
              微信配置
              <div :class="{ t_under_line_lei:activeNames === 'first'}"></div>
            </div>
            <div
              @click="choosetabs('second')"
              class="tabs_line_son"
              :class="activeNames === 'second' ? 't_tab_title_leis' : ''"
            >
              支付宝配置
              <div :class="{ t_under_line_lei:activeNames === 'second'}"></div>
            </div>
          </div>
          <div>
            <div class="zhiboxitong_table" v-show="activeNames === 'first' && activeName === 'two'">
              <!-- <h4 style="margin-bottom: 20px;"><span style="color: #409EFF; font-size: 12px; margin-left: 30px; cursor: pointer;" >点此下载配置说明文档</span></h4> -->
              <img
                src="../../static/img/park.png"
                class="img_alt"
                v-if="activeNames =='first'"
                @click="downall('/web/static/weixinzhifu.pdf','支付配置说明文档')"
              />
              <div class="flexc"  style="margin-top:40px">
                <div style="margin:0 0 0px 30px;font-size:16px">支付启用：</div>
              <el-switch
                style="display: block"
                v-model="all.is_enable_pay"
                active-color="rgb(71, 140, 253)"
                inactive-color="rgb(69, 69, 69)"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
              </div>
              <div style="margin-top:40px">
                <div>
                  <div style="margin:0 0 10px 30px;font-size:14px">商户号</div>
                  <div>
                    <el-input
                      v-model="all.data.mch_id"
                      style="width: 300px; margin-left:20px;margin-bottom:20px;"
                      placeholder="请输入商户号"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <div style="margin:10px 0 10px 30px;font-size:14px">商户秘钥</div>
                  <div>
                    <el-input
                      v-model="all.data.mch_secret_key"
                      style="width: 600px; margin-left:20px;margin-bottom:20px;"
                      placeholder="请输入商户秘钥"
                    ></el-input>
                  </div>
                </div>
              </div>
              <!-- <div class="flex">
                  <div class="flexc" style="margin-bottom: 20px;">
                    <div class="z">notify_url:</div>
                    <div class="r"><el-input v-model="all.data.notify_url"  style="width: 600px; margin-left:20px;" placeholder="请输入notify_url"></el-input></div>
                  </div>
              </div>-->
              <div>
                <div>
                  <div style="margin:10px 0 10px 30px;font-size:14px">公众号app_id</div>
                  <div>
                    <el-input
                      v-model="all.data.mp_app_id"
                      style="width: 600px; margin-left:20px;margin-bottom:20px;"
                      placeholder="请输入公众号app_id"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <div style="margin:10px 0 10px 30px;font-size:14px">公众号密钥</div>
                  <div>
                    <el-input
                      v-model="all.data.app_key"
                      style="width: 600px; margin-left:20px;margin-bottom:20px;"
                      placeholder="请输入公众号密钥"
                    ></el-input>
                  </div>
                </div>
              </div>

              <div class="flex">
                <div class="private_button">
                  <div style="margin:10px 30px 0 0;font-size:14px">私钥证书上传</div>
                  <div>
                    <el-upload class="upload-demo" action="#" :http-request="uploadok">
                      <el-button
                        round
                        style="background:#F72C6A;border:none;width:120px;height:40px;font-size:14px;color:white"
                      >点击上传</el-button>
                    </el-upload>
                  </div>
                </div>
              </div>
              <div class="flex">
                <div class="private_button">
                  <div style="margin:30px 30px 0 0;font-size:14px">公钥证书上传</div>
                  <div>
                    <el-upload class="upload-demo" action="#" :http-request="uploadok2">
                      <el-button
                        round
                        style="background:#F72C6A;border:none;width:120px;height:40px;font-size:14px;color:white;margin-top:20px"
                      >点击上传</el-button>
                    </el-upload>
                  </div>
                </div>
              </div>
            </div>

            <div
              class="zhiboxitong_table"
              v-show="activeNames === 'second' && activeName === 'two'"
            >
              <img
                src="../../static/img/park.png"
                class="img_alt"
                v-if="activeNames !='first'"
                @click="downall('/web/static/zhifubaozhifu.pdf','支付配置说明文档')"
              />

              <div class="flexc"  style="margin-top:40px">
                <div style="margin:0 0 0px 30px;font-size:16px">支付启用：</div>
              <el-switch
                style="display: block"
                v-model="all2.is_enable_pay"
                active-color="rgb(71, 140, 253)"
                inactive-color="rgb(69, 69, 69)"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
              </div>
              <!-- <h4 style="margin: 20px 0;">支付宝配置 <span style="color: #409EFF; font-size: 12px; margin-left: 30px; cursor: pointer;">点此下载配置说明文档</span></h4> -->
              <div class="flex" style="margin-top:40px">
                <div>
                  <div style="margin:0 0 10px 30px;font-size:14px">支付宝app_id</div>
                  <div>
                    <el-input
                      v-model="all2.data.app_id"
                      style="width: 300px; margin-left:20px;margin-bottom:20px;"
                      placeholder="请输入支付宝app_id"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div class="flex">
                <div>
                  <div style="margin:20px 0 10px 30px;font-size:14px">应用秘钥</div>
                  <div>
                    <el-input
                      v-model="all2.data.app_secret_cert"
                      style="width: 600px; margin-left:20px;margin-bottom:20px;"
                      placeholder="请输入应用秘钥"
                    ></el-input>
                  </div>
                </div>
              </div>
              <!-- <div class="flex">
                  <div class="flexc" style="margin-bottom: 20px;">
                    <div class="z">notify_url:</div>
                    <div class="r"><el-input v-model="all2.data.notify_url"  style="width: 600px; margin-left:20px;" placeholder="请输入notify_url"></el-input></div>
                  </div>
              </div>-->

              <div class="flex">
                <div class="flexc" style="margin: 20px 0 40px 0;">
                  <div class="z">应用公钥证书上传</div>
                  <div class="r">
                    <el-upload class="upload-demo" action="#" :http-request="uploadok3">
                      <el-button
                        size="small"
                        round
                        type="primary"
                        style="background:#F72C6A;border:none;width:120px;height:40px;font-size:14px"
                      >点击上传</el-button>
                    </el-upload>
                  </div>
                </div>
              </div>

              <div class="flex">
                <div class="flexc" style="margin-bottom: 40px;">
                  <div class="z">支付宝公钥证书上传</div>
                  <div class="r">
                    <el-upload class="upload-demo" action="#" :http-request="uploadok4">
                      <el-button
                        size="small"
                        round
                        type="primary"
                        style="background:#F72C6A;border:none;width:120px;height:40px;font-size:14px"
                      >点击上传</el-button>
                    </el-upload>
                  </div>
                </div>
              </div>

              <div class="flex">
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">支付宝根证书上传</div>
                  <div class="r">
                    <el-upload class="upload-demo" action="#" :http-request="uploadok5">
                      <el-button
                        size="small"
                        round
                        type="primary"
                        style="background:#F72C6A;border:none;width:120px;height:40px;font-size:14px"
                      >点击上传</el-button>
                    </el-upload>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="activeName === 'one'">
              <div style="margin:40px 0 0 30px;">
                <div style="display:flex;font-size:18px">
                  生产号码展示:
                  <el-switch
                    style="display: block;margin-left: 20px;"
                    v-model="config.show_plan_mobile"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#2678FF"
                    inactive-color="#CCC"
                    @change="setConfig"
                  ></el-switch>
                </div>
                <div style="color:#929292;font-size:16px;margin-top:10px">订单已拥有生产号码后会展示给用户</div>
              </div>
              <div style="margin:40px 0 0 30px;">
                <div style="display:flex;font-size:18px">
                  失败原因展示:
                  <el-switch
                    style="display: block;margin-left: 20px;"
                    v-model="config.show_reason"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#2678FF"
                    inactive-color="#CCC"
                                        @change="setConfig"

                  ></el-switch>
                </div>
                <div style="color:#929292;font-size:16px;margin-top:10px">当开卡失败时会展示失败原因给用户</div>
              </div>
              <div style="margin:40px 0 0 30px;">
                <div style="display:flex;font-size:18px">
                  物流轨迹展示:
                  <el-switch
                    style="display: block;margin-left: 20px;"
                    v-model="config.show_track"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#2678FF"
                    inactive-color="#CCC"
                     @change="setConfig"

                  ></el-switch>
                </div>
                <div
                  style="color:#929292;font-size:16px;margin-top:10px"
                >该项为增值服务，开启后您的客户可以查看物流实时轨迹，0.028元/单，同一订单反复查看仅计一次费</div>
              </div>
              <div style="margin:40px 0 0 30px;">
                <div style="display:flex;font-size:18px">
                  订单状态展示:
                  <el-switch
                    style="display: block;margin-left: 20px;"
                    v-model="config.show_status"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#2678FF"
                    inactive-color="#CCC"
                                        @change="setConfig"

                  ></el-switch>
                </div>
                <div style="color:#929292;font-size:16px;margin-top:10px">会把订单当前的生产状态展示给用户</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn_container" v-if="activeName  == 'one'">
      <el-button
        @click="setConfig"
        style="background:#3158F1;border:none;width:200px;height:40px;color:white;border-radius: 10px;"
      >保存配置</el-button>
      <!-- 订单查询配置按钮 -->
    </div>
    <div class="btn_container" v-if="activeName  == 'two'">
      <el-button
        @click="baocun(1)"
        style="background:#3158F1;border:none;width:200px;height:40px;color:white;border-radius: 10px;"
        v-if="activeNames =='first'"
      >确定保存</el-button>
      <el-button
        @click="baocun(2)"
        v-if="activeNames !='first'"
        style="background:#3158F1;border:none;width:200px;height:40px;color:white;border-radius: 10px;"
      >确定保存</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import top from "./components/top.vue";
import left from "./components/left.vue";
export default {
  components: {
    top,
    left
  },
  name: "shoukuanpeizhi",
  data() {
    return {
      activeNames: "first",
      activeName: "one",
      list: "",
      tongbuall: "",
      log: false,
      config: {
        show_plan_mobile: 0,
        show_reason: 0,
        show_track: 0,
        show_status: 0
      },
      all: {
        pay_method: 1,
        data: {
          mch_id: 1,
          mch_secret_key: "",

          mp_app_id: "",
          app_key: ""
        }
      },
      all2: {
        pay_method: 2,
        data: {
          app_id: "",
          app_secret_cert: ""
        }
      },
      all3: {
        type: "", //	wechat	是	string	wechat alipay
        file: "", //	[object Object]	是	file	证书文件
        name: "" //	pub	是	string	pub公钥pri私钥
      },
      fileList: ""
    };
  },
  created() {
    //1微信2支付宝
    axios.get(`${this.apis}/api/account/list`).then(response => {
      if (response.data.msg.code == 0) {
        response.data.data.data.forEach(item => {
          if (item.pay_method == 1) {
            this.getxinxi(item.id, 1);
          }
          if (item.pay_method == 2) {
            this.getxinxi(item.id, 2);
          }
        });
      } else {
        this.$message.error(response.data.msg.info);
      }
    });
    axios.get(`${this.apis}/api/web/store/config/get`).then(response => {
      if (response.data.msg.code == 0) {
        this.config = response.data.data;
      } else {
        this.$message.error(response.data.msg.info);
      }
    });
  },
  mounted() {},
  methods: {
    choosetab: function(val) {
      this.activeName = val;
    },
    choosetabs: function(val) {
      this.activeNames = val;
    },
    setConfig: function(val) {
      axios
        .post(`${this.apis}/api/web/store/config/set`, this.config)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('设置成功');
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    uploadok: function(file) {
      console.log(1);
      var formData = new FormData();
      formData.append("file", file.file);
      formData.append("type", "wechat");
      formData.append("name", "pri");
      axios.post(`${this.apis}/api/system/upload2`, formData).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("上传成功");
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    uploadok2: function(file) {
      var formData = new FormData();
      formData.append("file", file.file);
      formData.append("type", "wechat");
      formData.append("name", "pub");
      axios.post(`${this.apis}/api/system/upload2`, formData).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("上传成功");
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    uploadok3: function(file) {
      var formData = new FormData();
      formData.append("file", file.file);
      formData.append("type", "alipay");
      formData.append("name", "app_pub");
      axios.post(`${this.apis}/api/system/upload2`, formData).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("上传成功");
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    uploadok4: function(file) {
      var formData = new FormData();
      formData.append("file", file.file);
      formData.append("type", "alipay");
      formData.append("name", "ali_pub");
      axios.post(`${this.apis}/api/system/upload2`, formData).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("上传成功");
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    uploadok5: function(file) {
      var formData = new FormData();
      formData.append("file", file.file);
      formData.append("type", "alipay");
      formData.append("name", "ali_root");
      axios.post(`${this.apis}/api/system/upload2`, formData).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("上传成功");
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getxinxi: function(val, who) {
      axios.get(`${this.apis}/api/account/info?id=${val}`).then(response => {
        if (response.data.msg.code == 0) {
          if (who == 1) {
            this.all.is_enable_pay = response.data.data.is_enable_pay
            this.all.data.mch_id =
              JSON.parse(response.data.data.data).mch_id || "";
            this.all.data.mch_secret_key =
              JSON.parse(response.data.data.data).mch_secret_key || "";
            this.all.data.notify_url =
              JSON.parse(response.data.data.data).notify_url || "";
            this.all.data.mp_app_id =
              JSON.parse(response.data.data.data).mp_app_id || "";
            this.all.data.app_key =
              JSON.parse(response.data.data.data).app_key || "";
          }
          if (who == 2) {
            this.all2 = response.data.data;
            this.all2.data = JSON.parse(this.all2.data);
          }
          console.log(this.all);
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    baocun: function(val) {
      let data = "";
      if (val == 1) {
        data = this.all;
      } else {
        data = this.all2;
        delete data.data.mch_id;
        delete data.data.mch_secret_key;
        delete data.data.mp_app_id;
      }
      axios.post(`${this.apis}/api/account/make`, data).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("已保存");
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    }
  },

};
</script>

<style scoped lang="less">
.img_alt {
  width: 300px;
  cursor: pointer;
  position: absolute;
  top: 50px;
  right: 100px;
}
.btn_container {
  width: 100%;
  height: 50px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.t_tab_title_lei {
  color: #005aff;
}
.t_tab_title_leis {
  background: #005aff;
  color: white;
  width: 120px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 10px 20px 0 #c2ceff;
}
.tabs_line_son {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

// .t_tab_title_lei_no {
//   color: #999;
// }
.t_under_line_lei {
  width: 30px;
  height: 5px;
  background-color: #005aff;
  margin-top: 6px;
  border-radius: 10px;
}
.private_button {
  display: flex;
  margin-top: 20px;
  margin-left: 30px;
}
/deep/ .el-input__inner {
  // border: none;
  border-radius: 15px;
}
.shoukuanpeizhi {
  position: relative;
  // background: #f2f2f2;
  border-top-left-radius: 40px;
  min-height: 100vh;
  * {
    box-sizing: border-box;
  }
  .zhiboxitong_content {
    height: calc(100vh - 70px);
    .left {
      width: 210px;
      background: #fafafe;
      height: 100%;
    }
    .right {
      width: calc(100vw - 220px);
      padding: 15px 0 15px 25px;
      overflow: auto;
      height: 100vh;
      .zhiboxitong_right {
        padding: 20px 0 0 20px;
        // position: relative;
        background: #f8f9fd;
        border-top-left-radius: 40px;
        height: 100%;
      }
      .zhiboxitong_table {
        margin-top: 20px;
        position: relative;
      }
    }
  }
  .z {
    width: 160px;
  }
}
.tabs_container {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0 20px 10px;
  display: flex;
  width: 350px;
  justify-content: space-around;
  cursor: pointer;
}
.tabs_containers {
  color: #005aff;
  font-size: 16px;
  display: flex;
  width: 300px;
  justify-content: space-around;
  cursor: pointer;
}
</style>
